/**
 * 布置作业题目题型分布
 */

import React from 'react';
import { connect } from 'react-redux';

import { TeacherFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';

import ColumnChart from '../../components/dump/charts/ColumnChart';

import { clearData, getDataRequest } from '../../actions/fixup-work/dataAction';
import { setCondition } from '../../actions/fixup-work/conditionAction';

import moment from 'moment';
import { DATE_FORMATTER, ENUM_VIEW } from '../../../schema/constants';

class QuestionsDistribution extends React.Component {

	constructor(props) {
		super(props);
	}

	/**
	 * 获取图表视图的数据
	 */
	getViewData() {
		let action = getDataRequest(ENUM_VIEW.DAY, 'FixupWorkQuestionsDistribution');
		let { dispatch } = this.props;

		dispatch(clearData());
		dispatch(action);
	}

	// 处理日期范围变化
	handleDateRangeChange = (startDate, endDate) => {
		let { dispatch } = this.props;

		let action = setCondition('startDate', moment(startDate).format(DATE_FORMATTER));
		dispatch(action);

		action = setCondition('endDate', moment(endDate).format(DATE_FORMATTER));
		dispatch(action);

		this.getViewData();
	};

	// 点击高级筛选条件查询按钮
	handleSearch = () => {
		this.getViewData();
	};

	componentDidMount() {

		this.getViewData();
	}

	render() {
		let { store } = this.props;
		let { data, condition } = store;
		let { view, categories, series } = data;

		let { startDate, endDate } = condition;

		return (
			<div className='panel'>
				<TeacherFilter onSearch={this.handleSearch} />
				<ChartGroup
					onDateRangeChange={this.handleDateRangeChange}
					startDate={startDate}
					endDate={endDate}>
					<div className='chart'>
						<ColumnChart 
							title='布置作业题目题型分布' 
							subtitle='布置作业-老师-题目' 
							yAxisTitle='数目'
							categories={categories}
							series={series} />
					</div>
				</ChartGroup>
			</div>
		);
	}
}

export default connect((state) => ({ store: state.chart }))(QuestionsDistribution);